<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
        <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
        <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
	    <style>
            .fakeimg {
            height: 200px;
            background: #aaa;
            }
  </style>
	</head>
	<body>
		<div class="jumbotron text-center" style="margin-bottom:0 ;">
			<h1>我的第一个 Bootstrap 4 页面</h1>
            <p>重置浏览器窗口大小查看效果！</p> 
		</div>
		<!--navbar-expand-sm bg-dark navbar-dark-->
		<nav class="navbar navbar-expand-sm bg-dark navbar-dark">		
			<a class="navbar-brand" href="#">导航</a>
			<button class="navbar-toggler"type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
				<span class="navbar-toggler-icon"></span>
			</button>
			<div class="collapse navbar-collapse" id="collapsibleNavbar">
			<ul class="navbar-nav">
				<li class="nav-item">
					<a class="nav-link" href="#">主页</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#">链接</a>
				</li>
				<li class="nav-item"> 
					<a class="nav-link" href="#">链接</a>
				</li>
			</ul>
			</div>
		</nav>
		<div class="container">
			<div class="row">
				<div class="col-sm-4">
					<h2>关于我</h2>
                    <h5>我的照片:</h5>
                    <div class="fakeimg">
					<img src="img/1.jpg" style="height:200px ;">
					</div>
                    <p>关于我的介绍..</p>
                    <h3>一些链接</h3>
                    <p>说明文本</p>
                    <ul class="nav nav-pills">
                    	<li class="nav-item"><a class="nav-link active" href="#">激活状态</a></li>
                    	<li class="nav-item"><a class="nav-link" href="#">链接</a></li>
                    	<li class="nav-item"><a class="nav-link" href="#">链接</a></li>
                    	<li class="nav-item"><a class="nav-link disabled" href="#">链接</a></li>
                    </ul> 
                   <br />
                   <div class="dropdown">
                   	<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">HTML</button>
                   	<div class="dropdown-menu">
		            <a class="dropdown-item" href="#">HTML 教程</a>
		            <a class="dropdown-item" href="#">HTML 简介</a>
		            <a class="dropdown-item" href="#">HTML 基础</a>
		            </div>
                   </div>
                   <br />
                   <ul class="nav nav-tabs" >
                   	<li class="nav-item">
                   		<a class="nav-link" data-toggle="tab" href="#home">HOME</a>
                   	</li>
                   	<li class="nav-item">
                   		<a class="nav-link" data-toggle="tab" href="#menu1">menu1</a>
                   	</li>
                   	<li class="nav-item">
                   		<a class="nav-link" data-toggle="tab" href="#menu2">menu2</a>
                   	</li>
                   </ul>
                   <div class="tab-content">
                   	<div id="home" class="container tab-pane active"><br>
				    <h3>HTML</h3>
				    <p>超文本标记语言，标准通用标记语言下的一个应用。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。</p>
			        </div>
			        <div id="menu1" class="container tab-pane fade"><br>
				    <h3>CSS</h3>
				    <p>层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。</p>
			        </div>
			        <div id="menu2" class="container tab-pane fade"><br>
				    <h3>JS</h3>
				    <p>JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。</p>
			        </div>
                   </div>
                   <h2>模态框实例</h2>
		<!-- 按钮：用于打开模态框 -->
		<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
			打开模态框
		</button>
 
		<!-- 模态框 -->
		<div class="modal fade" id="myModal">
			<div class="modal-dialog">
				<div class="modal-content">
 
					<!-- 模态框头部 -->
					<div class="modal-header">
						<h4 class="modal-title">模态框头部</h4>
						<button type="button" class="close" data-dismiss="modal">×</button>
					</div>
 
					<!-- 模态框主体 -->
					<div class="modal-body">
						模态框内容..
					</div>
 
					<!-- 模态框底部 -->
					<div class="modal-footer">
						<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
					</div>
 
				</div>
			</div>
		</div>		
				</div>
				<div class="col-sm-8">
				    <h2>标题</h2>
                    <h5>副标题</h5>
                    <div class="fakeimg">图像</div>
				<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=1827600686&auto=1&height=66"></iframe>	
				<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=1824025894&auto=1&height=66"></iframe>
                    <p>一些文本..</p>
                    <p>菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！
			        <h2>标题</h2>
                    <h5>副标题</h5>
                    <div class="fakeimg">图像</div>
                    <p>一些文本..</p>
                    <p>菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！</p>
				</div>
			</div>						
		</div>
		<div id="demo" class="carousel slide" data-ride="carousel">
 
			<!-- 指示符 -->
			<ul class="carousel-indicators">
				<li data-target="#demo" data-slide-to="0" class="active"></li>
				<li data-target="#demo" data-slide-to="1"></li>
				<li data-target="#demo" data-slide-to="2"></li>
			</ul>
 
			<!-- 轮播图片 -->
			<div class="carousel-inner">
				<div class="carousel-item active">
					<img src="http://static.runoob.com/images/mix/img_fjords_wide.jpg" style="width: 100%">
				</div>
				<div class="carousel-item">
					<img src="http://static.runoob.com/images/mix/img_nature_wide.jpg" style="width: 100%">
				</div>
				<div class="carousel-item">
					<img src="http://static.runoob.com/images/mix/img_mountains_wide.jpg" style="width: 100%">
				</div>
			</div>
 
			<!-- 左右切换按钮 -->
			<a class="carousel-control-prev" href="#demo" data-slide="prev">
				<span class="carousel-control-prev-icon"></span>
			</a>
			<a class="carousel-control-next" href="#demo" data-slide="next">
				<span class="carousel-control-next-icon"></span>
			</a>
 
		</div>	
		<div class="jumbotron text-center">
			<p>底部内容</p>
		</div>
	</body>
</html>
